<script setup lang="ts">
import type { FormInstance } from '@arco-design/web-vue'
import { ConfigApi } from '@/apis'
import { Message } from '@arco-design/web-vue'

const category = 'notify.config'
const loading = ref(false)
const readonly = ref(true)
const config = ref()
const formRef = ref<FormInstance>()

const sceneList = [
  'enrollPassedTip',
  'classChangedTip',
  'lessonChangedTip',
  'classCanceledTip',
  'lessonCanceledTip',
  'lessonSignInTip',
]

const rules: FormInstance['rules'] = {
  // 'website.title': [{ required: true, match: Regexp.Name, message: '名称只能含有中文、数字、英文、下划线、短横线，长度为2-32位' }],
}

// 查询详情
const getConfig = async () => {
  loading.value = true
  ConfigApi.getNotifyConfig().then((res) => {
    config.value = res
  }).finally(() => {
    loading.value = false
  })
}

// 编辑
const onEdit = () => {
  readonly.value = false
}

// 取消
const onCancel = () => {
  readonly.value = true
  getConfig()
}
// 保存
const onSave = async () => {
  const req = {}
  sceneList.forEach((key) => {
    req[`${category}.${key}.parentWechatMpEnabled`] = config.value[key].parentWechatMpEnabled
    req[`${category}.${key}.teacherWecomEnabled`] = config.value[key].teacherWecomEnabled
  })
  await ConfigApi.updateConfigMap(req)
  Message.success('保存成功')
  readonly.value = true
  getConfig()
}
onMounted(async () => {
  getConfig()
})
</script>

<template>
  <a-spin :loading="loading" class="h-full w-full">
    <div class="float-right mb">
      <ReadonlyEditButton
        :readonly="readonly"
        :deleteable="false"
        @edit="onEdit"
        @cancel="onCancel"
        @save="onSave"
      />
    </div>

    <a-form v-if="config" ref="formRef" layout="vertical" :model="config" :rules>
      <table class="table">
        <thead class="table-header">
          <tr>
            <th class="table-header-th">
              标题
            </th>
            <th class="table-header-th" align="center" width="200">
              家长公众号通知
            </th>
            <th class="table-header-th" align="center" width="200">
              教师企业微信通知
            </th>
          </tr>
        </thead>
        <tbody class="table-body">
          <tr v-for="(key, index) of sceneList" :key="index" class="table-body-tr">
            <td class="table-td">
              <div class="flex-col-center-start gap-10px pl-12px">
                <span>{{ config[key].title }}</span>
                <span class="text-12px text-gray">{{ config[key].description }}</span>
              </div>
            </td>
            <td class="table-td">
              <div class="flex-col-center-center gap-10px">
                <a-checkbox v-model="config[key].parentWechatMpEnabled" :disabled="readonly" />
                <!-- <span class="text-12px text-gray">通知内容</span> -->
              </div>
            </td>
            <td class="table-td">
              <div class="flex-col-center-center gap-10px">
                <a-checkbox v-model="config[key].teacherWecomEnabled" :disabled="readonly" />
                <!-- <span class="text-12px text-gray">通知内容</span> -->
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </a-form>
  </a-spin>
</template>

<style scoped>
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.table-header {
  background-color: var(--color-neutral-2);
  padding: 10px 0;

  th {
    border: none;
    /* text-align: left; */
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-2);
    padding: 10px 0;
    padding-left: 12px;
  }
}

/* .table-header-th {

} */

.table-body-tr {
  border-bottom: 1px solid var(--color-border-table);

  td {
    padding: 8px 0;
  }
}
</style>
